<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>支付宝案例</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		li{
			list-style-type: none;
		}
		/*代码主体*/
		.login{
			width: 279px;
			height: 286px;
			background-color: #000000;
			margin: 100px auto;
		}
		.close{
			/*去除默认背景色*/
			background: transparent;
			/*去除默认边框*/
			border:none;
			color: #c5c4c4;
			/*外边距*/
			margin-left: 10px;
			/*去除轮廓线*/
			outline: none;
			font-size: 20px;
		}
		.info{
			width: 220px;
			/*高度自动*/
			height: auto;
			/*border:1px solid red;*/
			margin: 0 auto;
		}
		.title{
			color: #fff;
			/*字体粗细*/
			font-weight: 100;
			/*字体居中*/
			text-align: center;
			/*字体大小*/
			font-size: 18px;
		}
		/*邮箱输入框*/
		.input_box{
			margin-top: 20px;
			width: 100%;
			height: 40px;
			font-size: 0px;
			line-height: 40px;
		}
		.input_box img{
			vertical-align: top;
		}
		.input_box input{
			width: 180px;
			/*去除边框*/
			border:none;
			height: 40px;
			/*去除轮廓线*/
			outline: none;
			/*添加字体缩进*/
			text-indent: 1em;
		}
		/*忘记密码*/
		.forget{
			text-align: right;
			margin: 10px auto;
		}
		.forget a{
			color: #fff;
		}
		/*登录按钮*/
		.denglu{
			width: 100%;
			height: 40px;
			background: #00aaee;
			color: #fff;
			/*去除边框*/
			border:none;
			/*圆角*/
			border-radius: 6px;
			/*去除轮廓线*/
			outline: none;
			font-size: 17px;
			/*鼠标悬停小手*/
			cursor: pointer;
		}
		/*链接列表*/
		.a_list{
			margin-top: 4px;
		}
		.a_list a{
			font-size: 14px;
		}
		.bai{
			color: #fff;
		}
		.lan{
			color: #00aaee;
		}
	</style>
</head>
<body>
	<div class="login">
		<!-- 按钮 -->
		<button class="close">&times;</button>
		<!-- 安全区 -->
		<div class="info">
			<h3 class="title">登录支付宝</h3>
			<!-- 邮箱输入 -->
			<div class="input_box">
				<img src="http://graph.baidu.com/resource/1225f98f2d8318e0d194501594044813.jpg">
				<input type="text" name="" placeholder="邮箱/手机号/淘宝会员名">
			</div>
			<!-- 密码输入 -->
			<div class="input_box">
				<img src="http://graph.baidu.com/resource/1227063ae2467a28a842d01594044877.jpg">
				<input type="password" name="">
			</div>
			<!-- 忘记密码 -->
			<div class="forget">
				<a href="#">忘记登录密码？</a>
			</div>
			<!-- 按钮 -->
			<button class="denglu">登录</button>
			<!-- 链接列表 -->
			<div class="a_list">
				<a href="#" class="bai">淘宝会员登录</a>
				<a href="#" class="bai">账户激活</a>
				&nbsp;
				<a href="#" class="lan">免费注册</a>
			</div>
		</div>
	</div>
</body>
</html>